<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-carousel>
      <el-carousel-item v-for="b in bannerArr">
        <img :src="b.imgUrl" style="width: 100%;height: 100%">
      </el-carousel-item>
    </el-carousel>
    <!--  食谱相关开始  -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">烘焙食谱</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" @select="recipeSelect" default-active="0" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in recipeCategoryArr" :index="c.id">{{c.name}}</el-menu-item>

        </el-menu>
      </el-col>
    </el-row>
    <!--  内容列表开始  -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="c in recipeArr" style="margin: 10px 0">
        <el-card>
          <router-link :to="'/detail?id='+c.id">
            <img :src="BASE_URL+c.imgUrl" style="width: 100%;height: 145px">
            <p class="title_p">{{c.title}}</p>
          </router-link>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-avatar :size="35" :src="BASE_URL+c.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="20">
              <p style="margin-top: 10px">
                {{c.nickname}}
                <span style="font-size: 12px;color: #666;float: right">{{c.categoryName}}</span>
              </p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button @click="more(1)">点击加载更多</el-button>
    </div>
    <!--  内容列表结束  -->

    <!--  食谱相关开始  -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">烘焙视频</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal"  @select="videoSelect" default-active="0" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in videoCategoryArr" :index="c.id">{{c.name}}</el-menu-item>

        </el-menu>
      </el-col>
    </el-row>
    <!--  内容列表开始  -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="c in videoArr" style="margin: 10px 0">
        <el-card>
          <router-link :to="'/detail?id='+c.id">
            <img :src="BASE_URL+c.imgUrl" style="width: 100%;height: 145px">
            <p class="title_p">{{c.title}}</p>
          </router-link>

          <el-row :gutter="20">
            <el-col :span="4">
              <el-avatar :size="35" :src="BASE_URL+c.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="20">
              <p style="margin-top: 10px">
                {{c.nickname}}
                <span style="font-size: 12px;color: #666;float: right">{{c.categoryName}}</span>
              </p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button @click="more(2)">点击加载更多</el-button>
    </div>
    <!--  内容列表结束  -->
    <!--  视频相关结束  -->

    <!--  资讯相关开始  -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">行业资讯</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal"  @select="infoSelect" default-active="0" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in infoCategoryArr" :index="c.id">{{c.name}}</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!--  内容列表开始  -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="c in infoArr" style="margin: 10px 0">
        <el-card>
          <router-link :to="'/detail?id='+c.id">
            <img :src="BASE_URL+c.imgUrl" style="width: 100%;height: 145px">
            <p class="title_p">{{c.title}}</p>
          </router-link>

          <el-row :gutter="20">
            <el-col :span="4">
              <el-avatar :size="35" :src="BASE_URL+c.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="20">
              <p style="margin-top: 10px">
                {{c.nickname}}
                <span style="font-size: 12px;color: #666;float: right">{{c.categoryName}}</span>
              </p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button @click="more(3)">点击加载更多</el-button>
    </div>
    <!--  内容列表结束  -->
    <!--  资讯相关结束  -->


  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";
const more=(type)=>{
  router.push('/list?type='+type)
}

const bannerArr = ref([])
const contentArr = ref([
])
const recipeCategoryArr=ref([])
const videoCategoryArr=ref([])
const infoCategoryArr=ref([])

const recipeSelect=(index,indexPath)=>{
  //index代表的是二级分类的id
  loadContents(1,index)
}
const videoSelect=(index,indexPath)=>{
  //index代表的是二级分类的id
  loadContents(2,index)
}
const infoSelect=(index,indexPath)=>{
  //index代表的是二级分类的id
  loadContents(3,index)
}
const recipeArr=ref([]);
const videoArr=ref([]);
const infoArr=ref([]);
const loadContents=(type,categoryId)=>{
  axios.get(BASE_URL+"/v1/contents/"+type+"/"+categoryId+"/index")
    .then((response)=>{
      if (response.data.code==1){
        switch (type) {
          case 1:
            recipeArr.value=response.data.data;
            break;
          case 2:
            videoArr.value=response.data.data;
            break;
          case 3:
            infoArr.value=response.data.data;
            break;
        }
      }
    })
}

onMounted(()=>{
  //请求三种类型下的所有二级分类数据
  loadContents(1,0)
  loadContents(2,0)
  loadContents(3,0)

  //请求三个类型下的二级分类
  axios.get(BASE_URL+'/v1/categories/1/sub').then((response)=>{
    if (response.data.code==1){
      recipeCategoryArr.value=response.data.data
    }
  })
  axios.get(BASE_URL+'/v1/categories/2/sub').then((response)=>{
      videoCategoryArr.value=response.data.data;
  })
  axios.get(BASE_URL+'/v1/categories/3/sub').then((response)=>{
      infoCategoryArr.value=response.data.data;
  })

  //请求轮播图数据
  axios.get(BASE_URL+"/v1/banners")
    .then((response)=>{
      if (response.data.code==1){
        bannerArr.value=response.data.data;
      }
    })
})

</script>

<style scoped>
.title_p{
  height: 40px;
  overflow: hidden;/*设置不显示*/
  /*设置序省略号修改样式*/
  display: -webkit-box;
  -webkit-line-clamp:2;/*设置行数*/
  -webkit-align-orient:vertical;/*纵向*/

}

a{
  color: #333;
  text-decoration: none;
}
a:hover{
  color: orange;
}
</style>

